<!--
 * @Author: QUAN
 * @Date: 2021-08-27 11:04:26
 * @LastEditTime: 2021-11-29 10:49:30
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \mutong-jimu-h5-activity\src\views\MyBox\index.vue
-->

<template>
  <div class="my-box">
    <bottom-open-app-adv v-if="!$UA.isJM"></bottom-open-app-adv>
    <van-nav-bar
      title="我的盲盒"
      left-arrow
      v-if="$UA.isJM"
      @click-left="toJM"
      @click-right="servicer"
      class="my-nav-bar"
    >
      <template #right>
        <span>联系客服</span>
        <img src="../../assets/images/activity/serivier.png" alt="" />
      </template>
    </van-nav-bar>
    <div class="header" :class="{ app: !$UA.isJM }">
      <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
        <van-cell v-for="(item, index) in prizeList" :key="index">
          <div class="rewards">
            <img :src="item.cover" alt="" />
            <div class="remards-info">
              <p>{{ item.title }}</p>
              <p class="price">{{ item.price.replace('价值', '') }}</p>
              <div class="button-box">
                <van-button
                  size="small"
                  v-if="item.isAddr || item.code === 'vip_month'"
                  @click="toSharePrize(item)"
                >
                  中奖分享
                </van-button>
                <van-button
                  size="small finished"
                  v-if="item.isAddr && item.addrId"
                  @click="haveAddress"
                >
                  已填地址
                </van-button>
                <van-button
                  size="small"
                  v-if="item.isAddr && !item.addrId"
                  @click="toAddress(item)"
                  class="edit-address"
                >
                  填写地址
                </van-button>
                <van-button size="small finished" v-if="item.code === 'vip_month'" @click="toLook">
                  查看
                </van-button>
              </div>
            </div>
          </div>
        </van-cell>
      </van-list>
    </div>
  </div>
</template>
<script>
  import { mapGetters } from 'vuex';
  import BottomOpenAppAdv from '../../components/BottomOpenAppAdv.vue';
  import { Button, Toast, List, Cell, NavBar } from 'vant';
  import mixins from 'mixins';
  import qs from 'qs';
  Toast.setDefaultOptions({ duration: 3000 });

  export default {
    mixins: [mixins],
    components: {
      BottomOpenAppAdv,
      'van-button': Button,
      'van-list': List,
      'van-cell': Cell,
      'van-nav-bar': NavBar,
    },
    computed: {
      ...mapGetters(['$userInfo']),
    },
    created() {},
    mounted() {
      // 设置标题
      this.$appService.setNav({
        title: '我的盲盒',
        fullscreen: true,
      });

      const { address_id, jimu_r } = this.query;
      if (
        (address_id && jimu_r && address_id !== window.localStorage.getItem('jimu_address')) ||
        (address_id && jimu_r && jimu_r !== window.localStorage.getItem('jimu_r'))
      ) {
        this.$service.SalesLotteryAddr({ addrId: address_id, recordId: jimu_r }).then((res) => {
          Toast('地址填写成功，我们会尽快为您发货！');
          window.localStorage.setItem('jimu_address', address_id);
          window.localStorage.setItem('jimu_r', jimu_r);
        });
      }
    },
    data() {
      return {
        // list加载
        loading: false,
        finished: false,
        page: 0,
        // 奖品列表
        prizeList: [],
      };
    },
    methods: {
      // 分享抽到的奖品
      toSharePrize(item) {
        let _data = {}
        _data = item
        // 有uuid就传下去
        console.log(_data)
        if (this.$userInfo.uuid) {
          _data.uuid = this.$userInfo.uuid;
        }
        // 处理一下数据
        // 处理价格
        _data.priceLabel = _data.price || ' ';
        // 分享链接
        _data.shareUrl = `https://${
          process.env.NODE_ENV === 'development' ? 'dev-' : ''
        }jimu-h5.movtile.com/activity/blindbox.html${
          _data.uuid ? '?uuid=' + _data.uuid : ''
        }`;
        // 分享页面的标题
        _data.shareTitle = '分享积幕盲盒'
        // type为1代表盲盒的分享
        _data.type = 1
        // 其他信息
        _data.myOption = {
          // 这里面可以覆盖二维码的背景前景色或者大小啥的
          // width:'85',
          // hight:'85',
        }
        // 传递数据
        localStorage.setItem('shareImg', JSON.stringify(_data));
        // 分情况，在app里面要用头部的话，得用openlink，不然回来会出现两个头部
        if (this.$UA.isJM) {
          setTimeout(()=>{
            this.$appService.openLink({
              link: `https://${
                process.env.NODE_ENV === 'development' ? 'dev-' : ''
              }jimu-h5.movtile.com/activity/sharecard.html`,
            });
          },500)
        } else {
          setTimeout(()=>{
            window.location.href = new URL(`sharecard.html`, window.location.href);
          },500)
        }
      },

      // 去积幕
      toJM() {
        window.location.href = new URL(`blindbox.html`, window.location.href);
      },

      // 联系客服
      servicer() {
        if (this.$userInfo.nickname) {
          if (this.$UA.isJM) {
            this.$appService.openLink({
              link: 'mtjimu://chat?uid=6bafab092e4242968de5a42875b8313b',
            });
          } else {
            window.location.href = new URL(
              `https://${
                process.env.NODE_ENV === 'development' ? 'dev-' : ''
              }message.movtile.com/chat?uuid=6bafab092e4242968de5a42875b8313b`,
            );
          }
        } else {
          this.login();
        }
      },

      // 有了地址就不用跳转了
      haveAddress() {
        Toast('您已填写地址，我们会尽快为您安排发货！如需更改地址，请联系客服');
      },

      // 查看会员卡
      toLook() {
        if (this.$UA.isJM) {
          this.$appService.openLink({ link: 'vip.html' });
        } else {
          window.location.href = new URL(
            `https://${
              process.env.NODE_ENV === 'development' ? 'dev-' : ''
            }jimu-h5.movtile.com/vita/vip.html`,
          );
        }
      },

      clearOpenId(pId) {
        const currentQuery = qs.parse(window.location.search.substr(1));
        delete currentQuery['openId'];

        // 带商品id过去
        currentQuery.jimu_r = pId;

        const hrefWithoutOpenId = new URL(
          `mybox.html?${qs.stringify(currentQuery)}`,
          window.location.href,
        ).toString();
        return hrefWithoutOpenId;
      },
      // 去填写地址
      toAddress(val) {
        // 跳转之后,去除openId参数
        const hrefWithoutOpenId = this.clearOpenId(val.recordId);

        let _ = {
          redirect: hrefWithoutOpenId,
          mode: 'select',
        };

        // 有地址带上地址
        val.addrId ? (_.selected_address = val.addrId) : (val.addrId = val.addrId);

        const queryStr = qs.stringify(_);

        // 清空搜索的参数(这样没用)
        // window.location.replace(new URL(`mybox.html`, window.location.href));

        window.location.href = new URL(
          `https://${
            process.env.NODE_ENV === 'development' ? 'dev-' : ''
          }jimu-h5.movtile.com/mall/address.html?${queryStr}`,
          window.location.href,
        );
      },
      // 加载数据
      onLoad() {
        this.page += 1;
        this.getRewards();
      },
      // 获取奖品列表
      getRewards() {
        this.$service.SalesUserRewards({ page: this.page, size: 10 }).then((res) => {
          this.prizeList = this.prizeList.concat(res.rows);
          this.loading = false;
          if (this.prizeList.length >= res.total || res.total === 0) {
            this.finished = true;
          }
        });
      },
    },
  };
</script>
<style lang="less" scoped>
  .my-box {
    // vant样式修改
    .van-button {
      width: 7.8rem;
      height: 3.2rem;
      background: #00be8b;
      border-radius: 1.6rem;
      color: #fff;
      font-size: 1.4rem;
      white-space: nowrap;
    }
    .finished {
      background-color: #ccc;
      border: 1px solid #ccc;
      color: #fff;
    }
    .edit-address {
      border: 1px solid #00be8b;
      color: #00be8b;
      background-color: #fff;
    }
    .van-cell {
      padding: 2rem;
    }
    .van-cell::after {
      top: 110px;
    }
    /deep/ .van-nav-bar {
      .van-nav-bar__title {
        color: #111;
        font-weight: 600;
        font-size: 18px;
      }
      .van-nav-bar__arrow {
        font-size: 18px;
      }
      .van-nav-bar__right {
        img {
          width: 2.2rem;
          height: 2.2rem;
          margin-left: 5px;
        }
      }
      .van-icon {
        color: #111;
      }
    }

    // navbar
    .my-nav-bar {
      height: 9.4rem;
      padding-top: 4.5rem;
    }

    // 页面样式
    .header {
      border-top: 0.8rem solid #f3f3f3;
      &.app {
        margin-top: 6.5rem;
      }
      .rewards {
        display: flex;
        img {
          width: 7.7rem;
          height: 7.7rem;
          border-radius: 0.3rem;
        }
        .remards-info {
          position: relative;
          font-weight: 500;
          font-size: 1.6rem;
          color: #111;
          margin-left: 1.6rem;
          width: calc(100% - 7.7rem);
          .price {
            font-size: 1.4rem;
            font-weight: 400;
            color: #ff9c00;
            margin-top: 0.5rem;
          }
          .button-box {
            position: absolute;
            bottom: 0;
            right: 0;
            .van-button {
              margin-left: 1rem;
            }
          }
        }
      }
    }
  }
</style>
<style lang="less">
  .van-toast {
    border-radius: 2.4rem;
    font-size: 1.4rem;
    color: #fff;
    padding: 9px 14px;
    box-sizing: border-box;
  }
</style>
